<template>
  <div class="container">
    <div class="userinfo" @click="bindViewTap">
      <img class="userinfo-avatar" v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" background-size="cover" />
      <div class="userinfo-nickname">
        <card :text="userInfo.nickName"></card>
      </div>
    </div>
    <div class="usermotto">
      <div class="user-motto">
        <card :text="motto"></card>
      </div>
    </div>
    <form class="form-container">
      <input type="text" class="form-control" v-model="motto" placeholder="v-model" />
      <input type="text" class="form-control" v-model.lazy="motto" placeholder="v-model.lazy" />
    </form>
    <a href="/pages/counter/main?data=test" class="counter">去往Vuex示例页面</a>
    <mp-modal ref="mpModal" title="消息提示" content="请先登录后再使用" :showCancel="false" @confirm="confirm" @cancel="cancel"></mp-modal>
  </div>
</template>

<script>
import card from '@/components/card'
import mpButton from 'mpvue-weui/src/button'
import mpModal from 'mpvue-weui/src/modal'
export default {
  data () {
    return {
      motto: 'Hello World',
      userInfo: {}
    }
  },
  components: {
    card,
    mpButton,
    mpModal
  },
  methods: {
    confirm () {
      // 引导用户跳转登录授权页面
      wx.switchTab({
        url: '../login/main'
      })
    },
    cancel () {
      // 取消登录授权
    },
    bindViewTap () {
      const url = '../logs/main'
      wx.navigateTo({ url })
    },
    getUserInfo () {
      // 调用登录接口
      wx.login({
        success: () => {
          wx.getUserInfo({
            success: (res) => {
              // 成功授权
              this.userInfo = res.userInfo
            },
            fail: (res) => {
              // 引导用户跳转登录授权页面
              /* 调用组件的 `show` 方法显示 modal */
              this.$refs.mpModal.show()
            }
          })
        }
      })
    }
  },
  // 生命周期回调—监听小程序显示
  onShow () {
    this.getUserInfo()
  }
}
</script>

<style scoped>
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 150px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}

.counter {
  display: inline-block;
  margin: 10px auto;
  padding: 5px 10px;
  color: blue;
  border: 1px solid blue;
}
</style>
